<template>
  <div>
    <a-card title="新建木马样本养殖任务-文件" style="background-color: #fff">
      <div style="display: flex">
        <a-steps direction="vertical" :current="0">
          <a-step title="上传文件" description="第一步" />
          <a-step title="选择配置" description="第二步" />
        </a-steps>
        <a-card title="上传文件" style="width: 80%" :bordered="false">
          <!-- <div>
            <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
              <a-button> <a-icon type="upload" />选择上传文件</a-button>
            </a-upload>
            <a-button
              type="primary"
              :disabled="fileList.length === 0"
              :loading="uploading"
              style="margin-top: 16px"
              @click="handleUpload"
            >
              {{ uploading ? '正在上传' : '开始上传文件' }}
            </a-button>
          </div> -->
          <div>
            <a-form-model
              ref="ruleForm"
              :rules="rules"
              :model="ruleForm"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
              @submit="handleSubmit">
              <a-form-model-item label="任务名称" has-feedback prop="name">
                <a-input v-model="ruleForm.name"></a-input>
              </a-form-model-item>
              <a-form-model-item label="主虚拟机配置" has-feedback prop="main_vm_size">
                <a-select placeholder="选择配置" >
                  <a-select-option value="0x2000">
                    轻型配置
                  </a-select-option>
                  <a-select-option value="0x2010">
                    中型配置
                  </a-select-option>
                  <a-select-option value="0x2020">
                    重型配置
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="主虚拟机镜像" has-feedback prop="main_vm_image_type">
                <a-select placeholder="选择镜像" >
                  <a-select-option value="0x4000">
                    Ubuntu_16_Server_x64
                  </a-select-option>
                  <a-select-option value="0x4010">
                    CentOS_7_Minimal_x64
                  </a-select-option>
                  <a-select-option value="0x4020">
                    Windows_7_64
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="FTP辅助服务数量">
                <a-input-number id="inputNumber" v-model="ruleForm.FTPValue" :min="0" :max="100" />
                台
              </a-form-model-item>
              <a-form-model-item label="SSH辅助服务数量">
                <a-input-number id="inputNumber" v-model="ruleForm.SSHValue" :min="0" :max="100" />
                台
              </a-form-model-item>
              <a-form-model-item label="Mysql辅助服务数量">
                <a-input-number id="inputNumber" v-model="ruleForm.MysqlValue" :min="0" :max="100" />
                台
              </a-form-model-item>
              <a-form-model-item label="HTTP辅助服务数量">
                <a-input-number id="inputNumber" v-model="ruleForm.HTTPValue" :min="0" :max="100" />
                台
              </a-form-model-item>
              <a-form-model-item class="formBtn">
                <a-button type="primary" html-type="submit">确定</a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-card>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  data () {
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入任务名称'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        name: '', // 任务名称
        main_vm_size: '', // 主虚拟机配置
        main_vm_image_type: '', // 主虚拟机镜像
        FTPValue: 0,
        SSHValue: 0,
        MysqlValue: 0,
        HTTPValue: 0
      },
      fileList: [],
      uploading: false,
      // 表单验证
      rules: {
        name: [{ required: true, validator: validateName, trigger: 'blur' }],
        main_vm_size: [{ required: true, trigger: 'blur' }],
        main_vm_image_type: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleUpload () {
      const { fileList } = this
      const formData = new FormData()
      fileList.forEach((file) => {
        formData.append('files[]', file)
      })
      this.uploading = true

      // You can use any AJAX library you like
      // reqwest({
      //   url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      //   method: 'post',
      //   processData: false,
      //   data: formData,
      //   success: () => {
      //     this.fileList = []
      //     this.uploading = false
      //     this.$message.success('upload successfully.')
      //   },
      //   error: () => {
      //     this.uploading = false
      //     this.$message.error('upload failed.')
      //   }
      // })
    },
    // 新建确定按钮
    handleSubmit () {

    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="less" scoped>
.ant-steps {
  width: 20%;
}
.formBtn,.ant-col{
  text-align: center;
}
</style>
